<template>
  <div>
    <r-search
      :searchForm="searchForm"
      :searchHandle="searchHandle"
      :searchData="searchData"
    />
    <r-search :searchHandle="searchHandleAdd" />
    <r-table
      :isSelection="false"
      :isPagination="true"
      :tableData="tableData"
      :tableCols="tableCols"
      :tablePage="tablePage"
      @refresh="init()"
    ></r-table>
    <r-form
      :formRules="formRules"
      :formHandle="formHandle"
      :formData="formData"
      :formCols="formCols"
      ref="elForm"
      labelWidth="200px"
      dialogWidth="1000px"
      :isHandle="true"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchData: {
        deviceNo: "",
        nickName: "",
        phone: "",
        deviceType: "",
        status: ""
      },
      searchForm: [
        {
          type: "input",
          prop: "deviceNo",
          placeholder: "Device Number",
          width: 240
        },
        {
          type: "input",
          prop: "nickName",
          placeholder: "Malfunction Contacts",
          width: 270
        },
        {
          type: "input",
          prop: "phone",
          placeholder: "Malfunction Phone",
          width: 260
        },
        {
          type: "select",
          prop: "deviceType",
          placeholder: "Device Type",
          width: 230,
          options: [
            { value: "1", label: "Swap Cabinet" },
            { value: "2", label: "Rental Car" },
            { value: "3", label: "Charging Cabinet" },
            { value: "4", label: "Battery" }
          ]
        },
        {
          type: "select",
          prop: "status",
          placeholder: "Dispose Status",
          width: 240,
          options: [
            {
              label: "No Dispose",
              value: 1
            },
            {
              label: "Already Dispose",
              value: 2
            }
          ]
        }
        // {
        //   type: 'date',
        //   prop: 'adName',
        //   placeholder: '处理反馈时间',
        //   width: 150
        // },
      ],
      searchHandleAdd: [
        // {
        //   label: "Add广告",
        //   type: "success",
        //   handle: e => this.elFormVisible(),
        // },
      ],
      searchHandle: [
        {
          label: "Search",
          type: "success",
          icon: "el-icon-search",
          plain: true,
          handle: e => {
            this.zeroFn();
            this.init();
          }
        },
        {
          label: "Reset",
          buttonss: true,
          icon: "el-icon-refresh-right",
          handle: e => {
            this.searchData = {
              deviceNo: "",
              nickName: "",
              phone: "",
              deviceType: "",
              status: ""
            };
            this.zeroFn();
            this.init();
          }
        }
      ],
      tableData: [{}],
      tableCols: [
        // {
        //   label: '序号',
        //   prop: 'id'
        // },
        {
          label: "Device Number",
          prop: "deviceNo"
        },
        {
          label: "Declare Malfunction People",
          prop: "nickName"
        },
        {
          label: "Declare Malfunction Type",
          prop: "faultReason"
        },
        {
          label: "Malfunction Describe",
          prop: "faultContent"
        },
        {
          label: "Malfunction Picture",
          prop: "faultImg",
          type: "images"
        },
        {
          label: "Maintenance Personne Message",
          prop: "maintenancerName"
        },
        {
          label: "Dispose Status",
          prop: "status",
          formatter: e =>
            e.status == 1
              ? "No Dispose"
              : e.status == 2
              ? "Already Dispose"
              : ""
        },
        /* 	{
              label: '处理反馈',
              prop: 'dealDetails'
            }, */
        {
          label: "Submission Time",
          prop: "stime"
        },
        {
          label: "Processing Feedback Time",
          prop: "ftime"
        }
        // {
        //   label: 'Operations',
        //   type: "button",
        //   width: 180,
        //   btnList: [
        //     {
        //       label: '去处理',
        //       type: 'primary',
        //       handle: (row) => this.elFormDetail(row),
        //     }
        //   ]
        // }
      ],
      tablePage: { limit: 10, page: 1, total: 0 },
      formData: {
        devType: "1",
        adName: "",
        url: "",
        equipmentNos: [],
        status: "",
        type: "1"
      },
      formCols: [
        {
          type: "input",
          label: "Advertising Name",
          width: 350,
          prop: "adName",
          rmblock: true,
          remark:
            "Advertising Name It is only used to identify multiple AD items and is not displayed in the AD"
        },
        {
          type: "select",
          label: "Select Device",
          multiple: true,
          width: 350,
          prop: "equipmentNos",
          options: []
        },
        {
          type: "switch",
          label: "Online/Offline",
          width: 350,
          prop: "status",
          values: [1, 2]
        }
      ],
      formRules: {
        adName: [
          {
            required: true,
            message: "Please Input Advertising Name",
            trigger: "blur"
          }
        ],
        url: [
          { required: true, message: "Advertising Material", trigger: "blur" }
        ],

        equipmentNos: [
          { required: true, message: "Select Device", trigger: "blur" }
        ],
        status: [{ required: true, message: "Online Status", trigger: "blur" }]
      },
      formHandle: [
        {
          label: "Cancel",
          handle: e => this.elFormVisible()
        },
        {
          label: "Confirm",
          type: "success",
          handle: e => this.elFormSubmit()
        }
      ]
    };
  },
  components: {},
  computed: {},
  mounted() {
    this.init();
  },
  methods: {
    zeroFn() {
      this.tablePage.limit = 10;
      this.tablePage.page = 1;
      this.tablePage.total = 0;
    },
    async init() {
      let parm = {
        ...this.searchData,
        ...{
          pageNum: this.tablePage.page,
          pageSize: this.tablePage.limit
        }
      };
      let res = await this.apis.fault_list(parm);
      if (res) {
        this.tablePage.total = res.total;
        var list = res.rows || [];
        this.tableData = list;
      }
      // this.getDevList()
    },
    async getDevList() {
      this.formCols[2].options = [];
      let res2 = await this.api.getAdvertList({ devType: 1 });
      if (res2) {
        for (let i = 0; i < res2.data.length; i++) {
          this.formCols[2].options.push({
            value: res2.data[i].equipmentNo,
            name: res2.data[i].name
          });
        }
        this.tableData.map(item => {
          // item.eq = []
          item.equipmentNos = item.equipmentNos.split(",");
          // for (let i = 0; i < item.equipmentNos.length; i++) {
          //     item.eq.push(this.formCols[2].options.filter(it => it.value == item.equipmentNos[i])[0])
          // }
        });
      }
    },
    async changeOnline(row) {
      Object.keys(this.formData).forEach(key => {
        this.formData[key] = row[key];
      });
      this.formData.id = row.id;
      this.formData.equipmentNos = this.formData.equipmentNos.join(",");
      console.log(this.formData.equipmentNos);
      await this.api.advertupdate(this.formData);
    },
    async elFormSubmit(row) {
      this.formData.equipmentNos = this.formData.equipmentNos.join(",");
      if (row) {
        await this.api.advertupdate(row);
      } else {
        let res = null;
        if (this.formData.id) {
          res = await this.api.advertupdate(this.formData); //advertsave
        } else {
          res = await this.api.advertsave(this.formData);
        }
        if (res) {
          this.elFormVisible();
          this.init();
        }
      }
    },
    elFormDetail(row) {
      Object.keys(this.formData).forEach(key => {
        this.formData[key] = row[key];
      });
      this.formData.id = row.id;
      // if (this.formCols[1].label == '登录密码') {
      //     this.formCols.splice(1, 1)
      // }

      this.elFormVisible();
    }
  }
};
</script>
<style scoped lang="scss">
.el-icon-search {
  margin-right: 10px;
}

.Tip {
  margin-left: 20px;
}
</style>
